<template>
	<!-- goodsInfo 是{}，处在画面，会出现闪现。 -->
	<view v-if='goodsInfo.id' class="goods_details">
		<swiper :circular="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="3000"
			class="swiperContain">
			<swiper-item v-for="(item ,i) in goodsInfo.attachs" :key="i" class='swiperItem'>
				<image :src="item " class="swiperImg"></image>
			</swiper-item>
		</swiper>
		<view class="goods_info_box">
			<view class="goods_info_price">
				{{goodsInfo.name}}
			</view>
      
			<view class="goods_info_textbox">
				<view class="goods_info_box">
					<view class="goods_info_text">
						{{goodsInfo.redeemIntegral}}积分
					</view>
					<view class="goods_info_text" v-if="goodsInfo.money !=0">
						{{goodsInfo.integral}}积分+{{goodsInfo.money}}现金
					</view>
				</view>

				<view class="goods_info_stock">
					库存
					<text class="stock_style">
						{{goodsInfo.inventoryCount}}
					</text>
					件
				</view>
			</view>
		</view>
		<view class="goodsInfo-numBox">
			<view class="goodsInfo-num">数量</view>
			<view class="handleInput">
				<view class="handleAdd" @click="handleCut">-</view>
				<view class="handleBox">{{goodsCount}}</view>
				<view class="handleCut" @click="handleAdd">+</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goodsInfo-detailBox">
			<view class="goodsInfo-detailLeft"></view>
			<view class="goodsInfo-detail">
				产品详情
			</view>
		</view>
		<view style="padding: 20rpx;background-color: #fff; margin-bottom: 20rpx;">
			<view v-html="goodsInfo.synopsis"></view>
		</view>
		<view class="goods_button">
			<view class="goodsInfo_headphones" @click="headphones">
				<uni-icons type="headphones" style="font-size: 30rpx;"></uni-icons>
				<view>客服</view>
			</view>
			<view class="goodsInfo-goodsInfo">
				<view class="goodsInfo_goodsInfo1" @click="buttonintegral(goodsInfo)"
					v-if="goodsInfo.redeemIntegral!==0">
					积分兑换
				</view>
				<view class="goodsInfo_goodsInfo0" @click="buttonDraw" v-if="goodsInfo.drawStatus===1">
					抽一下（{{goodsInfo.drawIntegral}})</view>
				<view class="goodsInfo_goodsInfo2" @click="buttonintegralCash(goodsInfo)"
					v-if="goodsInfo.money!= 0.00&&goodsInfo.integral!= 0.00 ">
					积分+现金兑换</view>
			</view>
		</view>
		<!-- 弹出框 -->
		<uni-popup ref="popup" type="center">
			<view class="popupImg1" v-if='code'>
				<view class="notWinTitle">未中奖</view>
				<view class="notWinSecTitle">运气差一点</view>
				<view class="notWinThirTitle">攒攒运气再试试</view>
				<image src="../../static/notWin.png"></image>
			</view>
			<view class="popupImg0" v-else>
				<view class=" WinTitle">恭喜！</view>
				<view class=" WinSecTitle">您抽中了这份礼品！</view>
				<navigator class="WinThirTitle" url="/subpkg/myOrder/myOrder?show=winner"
					style="color:deepskyblue;border-bottom: 1rpx solid deepskyblue;">点击链接去兑奖！</navigator>
				<image src="../../static/win.png"></image>
			</view>
		</uni-popup>
	</view>
	<view v-else class="dataNull">没有数据展示</view>
</template>

<script>
	import request from '@/utils/request.js';
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		getMemberInfo
	} from '@/utils/utils.js';
	export default {
		computed: {
			...mapGetters('m_user', ['getMemberNum'])
		},
		data() {
			return {
				goodsCount: 1,
				goodsInfo: {
					attachs: [],
					goodsCount: 1,
				},
				drawIntegral: '',
				id: '',
				code: '',
				memberNum: '',
				isIntegral: '0'
			};
		},
		onLoad(option) {
			const id = option.id
			this.getGoodsInfo(id)
			this.MemberNum()
		},
		methods: {
			// 客服
			headphones() {
				uni.navigateTo({
					url: '/subpkg/headphones/headphones?url=http://csim.hongyantruck.com/im/text/104eac.html'
				});
			},
			createToken() {
				request.get('/api/products/createToken').then(res => {
					if (res.code === 0) {
						uni.setStorageSync('orderToken', res.data)
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			// 判断积分兑换是否可用
			isRedeemAvailable(goodsInfo) {
				return goodsInfo.redeemIntegral !== 0 || goodsInfo.redeemIntegral !== null;
			},

			// 判断积分+现金兑换是否可用
			isIntegralCashAvailable(goodsInfo) {
				return goodsInfo.integralCash !== 0 || goodsInfo.integralCash !== null;
			},
			...mapMutations('m_order', ['saveOrderInfo', 'saveGoodsCount']),
			// 积分+现金  
			buttonintegralCash(item) {
				this.isIntegral = '0';
				// 首先判断是否登录了，token
				if (uni.getStorageSync('userInfo').token) {
					if (item.inventoryCount > 0) {
						this.goodsInfo.goodsCount = this.goodsCount;
						this.goodsInfo.isIntegral = this.isIntegral
						this.createToken()
						uni.navigateTo({
							url: `/subpkg/goods_order/goods_order?orderInfo= ${JSON.stringify(this.goodsInfo)}&isIntegral=${ this.isIntegral  }`
						})
						this.saveOrderInfo(this.goodsInfo)
					} else {
						uni.$showMsg('商品库存不足！')
					}
				} else {
					uni.$showMsg('暂未登录，请先完成登录')
				}
			},
			// 纯积分兑换
			buttonintegral(item) {
				this.isIntegral = '1'
				// 首先判断是否登录了，token
				if (uni.getStorageSync('userInfo').token) {
					if (item.inventoryCount > 0) {
						this.goodsInfo.goodsCount = this.goodsCount;
						this.goodsInfo.isIntegral = this.isIntegral
						this.createToken()
						uni.navigateTo({
							url: `/subpkg/goods_order/goods_order?orderInfo= ${JSON.stringify(this.goodsInfo)}&isIntegral=${ this.isIntegral  }`
						})
						this.saveOrderInfo(this.goodsInfo)
					} else {
						uni.$showMsg('商品库存不足！')
					}
				} else {
					uni.$showMsg('暂未登录，请先完成登录')
				}
			},
			handleAdd() {
				if (this.goodsCount >= 10) {
					uni.$showMsg('礼品最多不能超过10件')

				} else {
					this.goodsCount++;
				}
			},
			handleCut() {
				if (this.goodsCount > 1) {
					this.goodsCount--;
				} else {
					uni.$showMsg('礼品不能少于1件')
				}
			},

			// 获取会员信息
			async MemberNum() {
				this.memberNum = await getMemberInfo(); 
				uni.setStorageSync('memberNum', this.memberNum)
				this.$store.commit('m_user/saveMemberNum', this.memberNum);

			},
			// 抽一下
			buttonDraw() {
				// 首先判断是否登录了，token 
				if (uni.getStorageSync('userInfo').token) {
					// this.memberNum,抽奖之前判断积分是否足够
						if (this.memberNum > this.goodsInfo.drawIntegral) {
						request.post('/drawrecord/raffle', {
							commodityId: this.goodsInfo.id
						}).then(res => {
							if (res.code === 0) {
								this.code = 0
								this.$refs.popup.open();
								this.MemberNum()
								// 重新调用会员积分接口
							} else if (res.code === 1 && res.msg === '未中奖') {
								this.code = 1
								this.$refs.popup.open();
								this.MemberNum()
							} else {
								uni.$showMsg(res.msg)
							}
						});
					} else {
						uni.$showMsg('积分不足，暂不能参加抽奖')
					}
				} else {
					uni.$showMsg('暂未登录，请完成先登录')
					return
					// 抽中弹出彩色图片，没抽中弹出灰色图片，先判断用户的积

				}
			},
			getGoodsInfo(id) {
				request.get(`/api/products/info/${id}`).then(res => {
					if (res.code === 0) {
						this.drawIntegral = res.data.drawIntegral
						this.goodsInfo = res.data
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	swiper {
		// width: 750rpx;
		background-color: #fff;

		image {
			// width: 100%;
			height: 100%;
			display: block;
		}
	}

	.dataNull {
		text-align: center;
		line-height: 100rpx;
	}

	.swiperContain {
		// border: 1rpx solid red;
		width: 100%;
		height: 420rpx;

		.swiperItem {
			// border: 1rpx solid blue;
			width: 100%;

			.swiperImg {
				// height: 350rpx;
				width: 100%;
				// border: 1rpx solid black;
			}
		}
	}

	.goods_info_box {
		margin-top: 10rpx;
		padding: 18rpx 10rpx;
		// padding-right: 0px;
		background-color: white;

		.goods_info_price {
			margin: 0 10rpx;
			font-size: 28rpx;
		}

		.goods_info_textbox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.goods_info_text {
				// margin-top: 10rpx;
				margin: 0 10rpx 0 0;
				font-size: 28rpx;
				color: #ff5555;
			}

			.goods_info_box {
				display: flex;

			}

			.goods_info_stock {
				margin-top: 10rpx;
				margin-right: 20rpx;
				font-size: 30rpx;

				.stock_style {
					color: orangered;
				}
			}
		}

	}

	.goodsInfo-numBox {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 20rpx;
		align-items: center;
		// box-shadow: 4rpx 2rpx 8rpx 0px rgba(175, 175, 175, 0.5);
		background-color: white;
		margin-top: 10rpx;

		.goodsInfo-num {
			font-size: 28rpx;
			padding-left: 20rpx;
		}

		.handleInput {
			display: flex;
			font-size: 32rpx;

			.handleAdd {
				width: 20rpx;
				height: 20rpx;
				padding: 10rpx;
				line-height: 20rpx;
				border: 1rpx solid #eeeeee;
				text-align: center;
				background-color: #efefef;
			}

			.handleBox {
				width: 60rpx;
				text-align: center;
				border: 1rpx solid #eeeeee;
				line-height: 35rpx;

			}

			.handleCut {
				text-align: center;
				line-height: 20rpx;
				padding: 10rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #efefef;
				border: 1rpx solid #eeeeee;
			}
		}
	}

	.goodsInfo-detailBox {
		line-height: 80rpx;
		border-bottom: 1rpx solid #eeeeee;
		padding: 10rpx 10rpx 10rpx 10rpx;
		// width: 100%;
		background-color: white;
		margin-top: 5rpx;
		display: flex;

		.goodsInfo-detailLeft {
			margin: 5rpx 0;
			border: 1rpx solid dodgerblue;
		}

		.goodsInfo-detail {
			font-size: 28rpx;
			font-weight: 400;
			padding-left: 20rpx;

			// &::before {
			// 	content: '';
			// 	display: block;
			// 	height: 30px;
			// 	width: 3px;
			// 	position: absolute;
			// 	top: 55%;
			// 	left: 15px;
			// 	transform: translateY(-50%);
			// 	background-color: #618ef1;
			// }
		}
	}

	.goods_info_info {
		width: 100%;
		font-size: 32rpx;
		color: #6b6868;
		white-space: normal;
		background-color: white;
	}

	.goods_button {
		// padding: 0rpx 20rpx;
		// padding-left: 20rpx;
		display: flex;
		position: fixed;
		bottom: -9rpx;
		left: 0;
		width: 100%;
		color: white;
		background-color: white;
		justify-content: space-between;
		align-items: center;
		// height: 110rpx;
		font-size: 30rpx;
		// height: 100%;

		.goodsInfo_headphones {
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-items: center;
			// justify-content: center;
			// height: 75rpx;
			color: black;
			margin-left: 20rpx;
		}

		.goodsInfo-goodsInfo {
			display: flex;

			.goodsInfo_goodsInfo0 {
				padding: 0rpx 20rpx 0rpx 20rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #f4f438;
				// height: 100%;
			}

			.goodsInfo_goodsInfo1 {
				padding: 0rpx 20rpx 0rpx 20rpx;
				// height: 100%;
				line-height: 90rpx;
				text-align: center;
				background-color: orange;
			}

			.goodsInfo_goodsInfo2 {
				padding: 0rpx 20rpx 0rpx 20rpx;
				// height: 100%;
				line-height: 90rpx;
				text-align: center;
				background-color: royalblue;
			}
		}

	}

	.goods_details {
		padding-bottom: 50rpx;

		.popupImg1 {
			background-color: white;
			width: 500rpx;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.notWinTitle {
				color: #618ef1;
				font-size: 28rpx;
				margin: 10rpx;
			}

			.notWinSecTitle {
				margin: 0 10rpx;
			}

			.notWinThirTitle {
				margin-top: 10rpx;
			}
		}

		.popupImg0 {
			background-color: white;
			width: 500rpx;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.WinTitle {
				color: #ff5555;
				font-size: 28rpx;
				margin: 10rpx;
			}

			.WinSecTitle {
				margin: 0 10rpx;
			}

			.WinThirTitle {
				color: #618ef1;
				margin-top: 10rpx;
				border-bottom: 1rpx solid #618ef1;
			}
		}
	}
</style>